<style scoped>
    .max{width: 100%;height: 100%;}
    .max .titl{position: fixed;left: 0px;top:0px;width: 100%;height: 7%;z-index: 999;}
    .max .box{width: 100%;margin-top: 7% ;}
    
</style>
<template>
    <div class="max">
        <div class="titl">
            <van-nav-bar
            title="新增收货地址"
            right-text="保存"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
            />
        </div>
        <div class="box">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                    v-model="username"
                    name="收货人"
                    label="收货人"
                    placeholder="收货人"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="phone"
                    name="手机号码"
                    label="手机号码"
                    :rules="[{ required: true, message: '请填写手机号码' }]"
                    />
                    <van-field
                        v-model="result"
                        is-link
                        readonly
                        name="area"
                        label="地区选择"
                        placeholder="点击选择省市区"
                        @click="showArea = true"
                    />
                    <van-popup v-model:show="showArea" position="bottom">
                        <van-area
                            :area-list="areaList"
                            @confirm="onConfirm"
                            @cancel="showArea = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="addrs"
                        name="详细地址"
                        label="详细地址"
                        placeholder="详细地址"
                        :rules="[{ required: true, message: '街道，楼牌号等' }]"
                    />
                    
                </van-cell-group>
                <van-field name="switch" label="设置默认地址
                提醒：每次下单时会使用该地址！
                实际下单地址会根据您购物切换的地址智能切换,
                请在下单时确认哦~">
                    <template #input>
                        <van-switch v-model="checked" size="20" />
                    </template>
                </van-field>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                    提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
const username = ref('');
const phone = ref('');
const onClickLeft = () => history.back();
const onClickRight = () => Toast('新增地址');
const onSubmit = (values) => {
    console.log('submit', values);
};
const addrs=ref('')
const checked = ref(false);
const result = ref('');
const showArea = ref(false);
const onConfirm = (areaValues) => {
    showArea.value = false;
    result.value = areaValues
    .filter((item) => !!item)
    .map((item) => item.name)
    .join('/');
};
</script>
